<template>
	<view>
		<!-- 忘记密码文字展示区域 -->
		<view class="loginWord">忘记密码</view>
		<!-- 输入框展示区域 -->
		<view class="inputBig">
			<view class="inputCon">
				<input @input="registerButton" class="phoneInput" placeholder="手机号" maxlength="11" type="number" placeholder-style="color:#999999;font-size:32rpx" v-model="phone"/>
				<image mode="widthFix" src="@/static/images/other/clear.png" @click="cleanInput()"></image>
				<view class="verific" v-if="sendStatus" @click="sendCode">发送验证码</view>
				<view class="resend" v-if="!sendStatus">重发({{sendTime}})</view>
			</view>
			<view class="inputCon">
				<input @input="registerButton" class="phoneInput" placeholder="新密码(6-18位)" type="text" :password="!eyeOpen" placeholder-style="color:#999999;font-size:32rpx" v-model="password"/>
				<image mode="widthFix" src="@/static/images/other/eye_open.png" @click="changeEye(false)" v-if="eyeOpen"></image>
				<image mode="widthFix" src="@/static/images/other/eye_close.png" @click="changeEye(true)" v-if="!eyeOpen"></image>
			</view>
			<view class="inputCon">
				<input @input="registerButton" class="phoneInput" placeholder="收到的验证码" maxlength="4" type="number" placeholder-style="color:#999999;font-size:32rpx" v-model="code"/>
			</view>
		</view>
		<!-- 确认按钮 -->
		<view class="loginButton" @click="forgot" :style="{backgroundColor: verifyAllStatus ? '#124EE6' : '#A5BBF2'}">
			<view class="loginWord" >确认</view>
		</view>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		
	</view>
</template>

<script>
	import {forgot,verifyPhone,sendCode} from "@/api/loginApi.js";
	import popup from "@/components/popup.vue";
	import {sendMessage} from "@/api/file.js";
	export default {
		components:{popup},
		data() {
			return {
				phone:"",
				password:"",
				eyeOpen:false,
				sendTime:30,
				sendStatus:true,
				msgType:"",
				messageText:"",
				code:"",
				verifyAllStatus:false,
				themeColor:"",
				themeColorLess:"",
			};
		},
		mounted() {
			const phone = uni.getStorageSync("phone");
			this.phone = phone;
		},
		methods:{
			cleanInput(){
				this.phone = "";
			},
			changeEye(status){
				this.eyeOpen = status;
			},
			
			// 弹出层提示
			_popError(errorText){
				this.msgType = "error";
				this.messageText = errorText;
				this.$refs.message.open();
			},
			_popWarn(warnText){
				this.msgType = "warn";
				this.messageText = warnText;
				this.$refs.message.open();
			},
			_popSuccess(successText){
				this.msgType = "success";
				this.messageText = successText;
				this.$refs.message.open();
			},
			
			/**
			 * 验证手机号格式
			 */
			_verify(phone){
				var mobilereg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
				if (this.phone.length != 11 || !mobilereg.test(this.phone)){
					const errorText = "手机号格式错误";
					this._popError(errorText);
					return false;
				}
				return true;
			},
			
			/**
			 * 验证手机号是否注册
			 */
			async _phoneRegister(phone){
				let ans = (await verifyPhone(this.phone)).data;
				console.log(ans);
				if (ans.code != 200) {
					this._popError(ans.error);
					return false;
				}
				if (!ans.data.isRegister){
					this._popWarn("该账号未注册");
					return false;
				}
				return true;
			},
			
			/**
			 * 发送验证码
			 */
			async sendCode(){
				let ans;
				//验证手机号格式
				ans = this._verify(this.phone);
				if (!ans) return;
				//验证手机号是否注册
				ans = await this._phoneRegister(this.phone);
				if (!ans) return;
				//发送验证码
				this.sendStatus=false;
				this.sendTime=60;
				//设置重发倒计时
				let that = this;
				let sendCodeInterval = setInterval(function(){
					that.sendTime = that.sendTime-1;
					if (that.sendTime == 0){
						that.sendStatus = true;
						clearInterval(sendCodeInterval);
					}
				},1000);
				ans = (await sendMessage(this.phone,2)).data;
				console.log("sendMessage",ans);
				if (ans.code != 200) {
					this._popError(ans.error);
					return;
				}
				
				
				this._popSuccess("验证码发送成功，请查收");
				
			},
			
			/**
			 * 验证三个参数格式
			 */
			_verifyAll(){
				if (this.phone.length != 11){
					this._popWarn("手机号格式错误");
					return false;
				}
				if (this.password.length < 6 || this.password.length > 18){
					this._popWarn("密码长度不符合规定");
					return false;
				}
				if (this.code.length != 4){
					this._popWarn("验证码长度不符合规定");
					return false;
				}
				return true;
			},
			
			/**
			 * 注册按钮背景判断
			 */
			registerButton(){
				if (this.phone.length != 11){
					this.verifyAllStatus = false;
					return false;
				}
				if (this.password.length < 6 || this.password.length > 18){
					this.verifyAllStatus = false;
					return false;
				}
				if (this.code.length != 4){
					this.verifyAllStatus = false;
					return false;
				}
				this.verifyAllStatus = true;
				return true;
			},
			
			/**
			 * 用户忘记密码
			 */
			async forgot(){
				//验证参数
				let ans;
				ans = this._verifyAll();
				if (!ans) return;
				ans = (await forgot(this.phone,this.password,this.code)).data;
				console.log(ans);
				if (ans.code != 200) {
					this._popError(ans.error);
					return;
				}
				this._popSuccess("重置密码成功");
				uni.setStorageSync("phone",this.phone);
				setTimeout(() => {
					uni.navigateTo({
						url:"/pages/login/login"
					})
				},800);
			},
		},
		onLoad(){
			//获取主题颜色
			let color = uni.getStorageSync("color");
			this.themeColor = JSON.parse(color).themeColor;
			this.themeColorLess = JSON.parse(color).themeColorLess;
		},
	}
</script>

<style lang="scss" scoped>
	//忘记密码文字展示区域
	.loginWord{
		margin: 10rpx $both-sides 0 $both-sides;
		font-size: 40rpx;
		font-weight: 600;
	}
	
	//输入框展示区域
	.inputBig{
		margin: 100rpx $both-sides 0 $both-sides;
		
		.inputCon{
			padding-left: 12rpx;
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;
			border-bottom: solid $border-color $border-size;
			
			input{
				font-size: 32rpx;
				width: calc(100% - 40rpx);
			}
			image{
				margin-left: 10rpx;
				width: 30rpx;
			}
			.verific{
				text-align: center;
				width: 170rpx;
				font-size: 26rpx;
				color: #2962F6;
			}
			.resend{
				text-align: center;
				width: 170rpx;
				font-size: 26rpx;
				color: #999999;
			}
		}
		
		.inputCon:nth-child(n+1){
			margin-top: 40rpx;
		}
		.inputCon:nth-child(1){
			input{
				font-size: 32rpx;
				width: calc(100% - 200rpx);
			}
		}
	}
	
	//登录按钮
	.loginButton{
		margin: 80rpx $both-sides 0 $both-sides;
		height: 90rpx;
		background-color: #A5BBF2;
		border-radius: 18rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.loginWord{
			height: 90rpx;
			line-height: 90rpx;
			font-weight: 500;
			color: white;
			font-size: 30rpx;
		}
	}
	
	
</style>
